<!-- 选项（类别）功能组件 -->
<template>
  <div class="coverBG" v-show="show">
    <div class="floatPanel" v-show="show">
      <div class="title">
        <div class="name">{{menuName}}管理</div>
        <div class="butClose" @click="closePanel"></div>
      </div>
      <div class="body">
        <div class="find">
          <label class="findName">{{menuName}}</label>
          <input type="text" maxlength="50" :model="txtSearch" class="txtFind" value="" :placeholder="'请输入#'+menuName+'#名称/编码/类别关键词搜索'" />
          <button class="butThree" @click="toSearch"><img src="../assets/img/search.png" />查询</button>
          <button class="butTwo" @click="openEdit(0)"><img src="../assets/img/create.png" />新增</button>
        </div>
        <div class="table">
          <!-- 数据表格 -->
        </div>
      </div>
      <div class="button">
        <button class="butOne" @click="closePanel">关闭</button>
      </div>
    </div>
    <type-edit :theData="theData" :theOrg="theOrg" :show="showEdit" v-show="showEdit"></type-edit>
  </div>
</template>
  <script>
  import typeEdit from "./typeEdit.vue";
  export default {
    data() {
      return {
        menuName: "",
        dataKey: "",
        txtSearch: "",
        paramData:[], //字段数组
        dataItems:[], //数据数组
        pageData:{},
        editUrl:'',
        findUrl: '',
        showEdit: false
      };
    },
    components:{
      typeEdit
    },
    props:{
      theData:{
        type:Object,
        required:true
      },
      theOrg:{
        type:Number,
        required:true
      },
      show:{
        type:Boolean,
        require:false
      }
    },
    created() {
      
    },
    watch: {
      theData(data){
        this.paramData = [];
        this.dataItems = [];
        this.pageData = {}
        this.editUrl = '';
        this.findUrl = '';
        this.showEdit = false;
        //this.loadData();
      }
    },
    methods: {
      closePanel(){
        this.show = false;
      },
      openEdit(id){
        this.theData.dataId = id;
        this.theData.menuName = this.menuName;
        this.theData.dataKey = this.dataKey;
        var actionUrl = this.editUrl + "?dataKey="+this.dataKey;
        if(id != null && id > 0){
          actionUrl += "&id="+id;
        }
        actionUrl = this.changeUrl(actionUrl);
        this.theData.actionUrl = actionUrl;
        this.showEdit = true;
      },
      async loadData(){
        var toUrl = this.changeUrl(this.theData.actionUrl);
        let { data: res } = await this.$http.get(toUrl);
        if (res.result) {
          console.log('get data:>>');
          console.log(res.obj);
          this.paramData = res.obj.tableParam;
          this.menuName = res.obj.editMenuName;
          this.dataKey = res.obj.dataKey;
          this.editUrl = res.toUrl;
          this.findUrl = res.obj.submitUrl;
        }else{
          this.clewMsg(res.type,res.mes);
        }
      },
      async toSearch(){ //搜索
        console.log('find data:>>');
        if(this.txtSearch != null && this.txtSearch.length > 0){
          var toUrl = this.findUrl + this.txtSearch;
          toUrl = this.changeUrl(toUrl);
          let { data: res } = await this.$http.get(toUrl);
          if (res.result) {
            console.log(res.obj);
            this.dataItems = res.obj.items;
            this.pageData = {
              pageIndex: res.obj.pageIndex,
              pageSize: res.obj.pageSize,
              pageNum: res.obj.pageNum,
              pageCount: res.obj.pageCount
            };                        
          }else{
            this.clewMsg(res.type,res.mes);
          }
        }else{
          this.clewMsg(2,'请输入您需要搜索的关键词');
        }
      },
      //处理URL自增加组织ID
      changeUrl(url){
        if(/\?|&/.test(url)){
          url += '&orgId=' + this.theOrg;
        }else{
          url += '?orgId=' + this.theOrg;
        }      
        console.log("changeURL:" + url);
        return url;
      },
      //提款信息
      clewMsg(type,mes){
        var theType = 'warning';
        if(type == 1)
          theType = 'success';
        else if(type == 3)
          theType = 'error';
        this.$message({
          message: mes,
          type: theType
        });
      }
    }
  };
  </script>
  <style scoped>
    .floatPanel{
    padding: fixed;
    z-index: 888;
    left: calc((100% - 850px) / 2);
    top: 100px;
    width: 850px;
    height: 520px;
    background-color: #FFF;
    border-radius: 8px;
    box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
  }
  .coverBG{
    position: fixed;
    z-index: 886;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.15);
    cursor: default;
  }
  .title{
    clear: both;
    width: calc(100% - 50px);
    height: 40px;
    padding: 10px 25px;
    border-bottom: solid 1px #EEE;
  }
  .name{
    float: left;
    height: 40px;
    line-height: 40px;
    color: #000;
    font-size: 16px;
    text-align: left;
  }
  .butClose{
    float: right;
    height: 40px;
    width: 40px;
    cursor: pointer;
    background: url(../assets/img/close.png) no-repeat;
    background-size: 50% 50%;
    background-position: center center;
  } 
  .body{
    clear: both;
    padding: 25px 20px;
    width: calc(100% - 40px);
    height: calc(100% - 170px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .body::-webkit-scrollbar {  
    display: none; 
    width: 0px;
  }
  .button{
    clear: both;
    width: calc(100% - 40px);
    height: 40px;
    padding: 10px 20px;
    border-top: solid 1px #EEE;
    align-items: right;
    text-align: right;
  }
  .butThree{
    padding: 8px 10px;
    height: 22px;
    line-height: 22px;
    margin-right: 10px;
    font-size: 16px;
    color: #00A578;
    background: #FFF;
    border: 1px solid #00A578;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    align-items: center;    
  }
  .butTwo img,.butThree img{
    height: 15px;
    width: auto;
    margin-right: 5px;
  }
  .find{
    clear: both;
    width: 100%;
    height: 42px;
    line-height: 40px; 
    text-align: left;
    align-items: center;
  }
  .findName{
    height: 40px;
    margin-right: 10px; 
    font-size: 14px; 
    color: #000;
  }
  .table{
    clear: both;
    width: 100%;
  }
  .txtFind{
    padding: 8px 12px;
    width: 220px;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    color: #000;
    border-radius: 8px;
    border: #CCC solid 1px;
    margin-right: 20px;
  }
  .txtFind:hover{
    border-color: #00A578;
  }
  </style>
  